<template>
  <div style="height: calc(100% - 30px);padding:10px;">
    <div ref="hgetter" slot="valueform" class="tableContainer widthPage" :class="{ foremZank: isActive }" style="height: calc(100% - 42px);">
      <div v-loading="loading" class="h-getter" style="height: calc(100%);">
        <el-table
          id="dataTable"
          border
          :data="tableDataDefectPlus"
          height="100%"
          style="width: 100%;">
          <el-table-column
            type="index"
            label="序号"
            sortable
            width="70"
            show-overflow-tooltip
            align="center" />
          <el-table-column
            prop="lineAttr.lineName"
            label="线路"
            sortable
            width="100"
            show-overflow-tooltip
            align="center" />
          <el-table-column
            prop="siteAttr.siteName"
            label="区间站场"
            sortable
            width="100"
            show-overflow-tooltip
            align="center" />
          <el-table-column
            prop="directionAttr.directionName"
            label="行别"
            sortable
            width="100"
            show-overflow-tooltip
            align="center" />
          <el-table-column
            prop="pillarAttr.pillarNum"
            label="支柱号"
            sortable
            width="100"
            show-overflow-tooltip
            align="center" />
          <el-table-column
            prop="deptAttr.deptName"
            label="所属工区"
            align="center"
            show-overflow-tooltip
            sortable
            width="150" />
          <el-table-column
            prop="userDefectTypeAttr.userDefectTypeName"
            label="缺陷分类"
            sortable
            width="100"
            show-overflow-tooltip
            align="center" />
          <el-table-column
            prop="gradeAttr.userGradeName"
            label="缺陷等级"
            align="center"
            show-overflow-tooltip
            sortable
            width="100" />
          <el-table-column
            prop="gatherTypeAttr.typeName"
            label="缺陷来源"
            align="center"
            sortable
            show-overflow-tooltip
            width="100" />
          <el-table-column
            prop="finder"
            label="发现人"
            align="center"
            show-overflow-tooltip
            sortable
            width="100" />
          <el-table-column
            prop="findDt"
            label="发现日期"
            show-overflow-tooltip
            align="center"
            sortable
            width="100" />
          <el-table-column
            prop="desc"
            label="缺陷描述"
            align="center"
            show-overflow-tooltip
            sortable />
          <el-table-column
            prop="defectStatusName"
            label="处理状态"
            align="center"
            show-overflow-tooltip
            sortable
            width="100" />
          <el-table-column
            prop="solvePerson"
            label="处理人"
            show-overflow-tooltip
            align="center"
            sortable
            width="100" />
          <el-table-column
            prop="solveDt"
            label="处理日期"
            align="center"
            show-overflow-tooltip
            sortable
            width="100" />
          <el-table-column
            width="100"
            align="center"
            label="操作"
            fixed="right">
            <template slot-scope="scope">
              <a class="el-icon-view" @click="detectId = tableDataDefect[scope.$index]._id;isActive = !isActive" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <Pagination
          :hidden="false"
          :total="total"
          :page.sync="queryParams.page"
          :size.sync="queryParams.size"
          @pagination="findHistoryDefect(queryParams)" />
      </div>
    </div>
    <div class="phm-tanc" :class="{ phmtancshow: isActive }">
      <p class="phm-tanc-top"><span class="el-icon-close" @click="isActive=!isActive" />缺陷详情</p>
      <formtable v-if="isActive && detectId" :detect-id="detectId" />
    </div>
  </div>

</template>

<script>
import dayjs from 'dayjs'
import Formtable from '../../defect-information/TableForem'
import { findHistoryDefect } from '@/api/cms/detect-data/information'
export default {
  components: {
    Formtable
  },
  props: {
    params: Object
  },
  data() {
    return {
      loading: false,
      detectId: '',
      isActive: false,
      fomSlect1: '',
      tableDataDefect: [],
      gatherTypeList: ['', '检修', '巡视', '检测', '检验', '其它'],
      formParams: {}, // 用于查询条件回显
      queryParams: {
        page: 1,
        size: 20
      },
      total: 0
    }
  },
  computed: {
    tableDataDefectPlus: function() {
      var result = JSON.parse(JSON.stringify(this.tableDataDefect))
      result.forEach((row) => {
        row.gatherTypeAttr.typeName = this.gatherTypeList[row.gatherTypeAttr.typeClass || 0]
      })
      return result
    }
  },
  mounted() {
    this.queryParams = Object.assign({}, this.queryParams, this.params)
    // 页面动画展示之后请求接口
    var that = this
    setTimeout(function() {
      that.findHistoryDefect()
    }, 200)
  },
  methods: {
    findHistoryDefect() {
      this.loading = true
      findHistoryDefect(this.queryParams).then(response => {
        // console.log('关键设备历史缺陷', response)
        if (response.data) {
          console.log(response.data.records)
          this.tableDataDefect = response.data.records || []
          this.total = response.data.total || 0
        } else {
          this.tableDataDefect = []
          this.total = 0
        }
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    getListAll() {
      findHistoryDefect({ ...this.queryParams, size: 99999 }).then(response => {
        // console.log('关键设备历史缺陷', response)
        if (response.data) {
          this.tableDataDefect = response.data.records || []
          this.total = response.data.total || 0
        } else {
          this.tableDataDefect = []
          this.total = 0
        }
        this.$refs.searchtop.exportExcel()
      })
    },
    getSearchCondition(val) {
      this.queryParams = {
        page: 1,
        size: 20
      }
      this.queryParams.defectTypeId = val.defectTypeId
      this.queryParams.deptCode = val.selectBum
      this.queryParams.gradeCode = val.gradeCode
      this.queryParams.attCode = val.attCode
      this.queryParams.parameterClass = val.parameterClass
      this.queryParams.statusType = val.statusType
      this.queryParams.statusCode = val.statusCode
      this.queryParams.devClassCode = val.devClassCode
      this.queryParams.fatal = val.fatal
      this.queryParams.reasonType = val.reasonType
      this.queryParams.pillarNum = val.pillarCode
      // this.queryParams.specificDefectsCode = val.specificDefectsCode
      // this.queryParams.parameterClass = val.parameterClass
      // this.queryParams.proCode = val.proCode
      const line = val.selectLin
      if (line) {
        const lineCode = line.split('-')[1]
        this.queryParams.lineCode = lineCode
      }
      const site = val.selectQujian
      if (site) {
        const siteCode = site.split('-')[1]
        this.queryParams.siteCode = siteCode
      }
      this.queryParams.typeClass = val.selectLaiy
      this.queryParams.searchDefectStatus = val.selectZuangt
      if (val.selectShij) {
        this.queryParams.startFindDate = dayjs(val.selectShij[0]).format('YYYY-MM-DD')
        this.queryParams.endFindDate = dayjs(val.selectShij[1]).format('YYYY-MM-DD')
      }
      if (val.selectShijA) {
        this.queryParams.startSolveDate = dayjs(val.selectShijA[0]).format('YYYY-MM-DD')
        this.queryParams.endSolveDate = dayjs(val.selectShijA[1]).format('YYYY-MM-DD')
      }
      if (val.size) {
        this.getListAll()
      } else {
        this.findHistoryDefect()
      }
    }
  }
}
</script>
<style scoped>
.phm-tanc-top{
    font-size: 16px;
    height: 42px;
    line-height: 42px;
    color: white;
    padding-left: 10px;
    background: #3a475b;
}
.el-icon-close {
      float: right;
      margin-top: 10px;
      margin-right: 10px;
      font-size: 23px;
      color: white;
      cursor: pointer;
    }
</style>
